<template>
    <div class="sign-up-info">
        <div class="search-content">
            <!-- <el-input class="search-content-input" v-model="searchContent.groupName" placeholder="请输入团购名称"></el-input> -->
            <div class="time-range-wrapper" >
                <span class="time-range-label">核销时间：</span>
                <el-date-picker
                    v-model="searchContent.verifyTime"
                    type="daterange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="time-range-wrapper" >
                <span class="time-range-label">购买时间：</span>
                <el-date-picker
                    v-model="searchContent.addTime"
                    type="daterange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-input class="search-content-input" v-model="searchContent.userName" placeholder="请输入核销人员姓名"></el-input>
            <el-input class="search-content-input" v-model="searchContent.userPhone" placeholder="请输入电话"></el-input>
            <el-input class="search-content-input" v-model="searchContent.store_name" placeholder="请输入店铺名称"></el-input>
            <!-- <el-input class="search-content-input" v-model="searchContent.signUpChannel" placeholder="请输入报名渠道"></el-input> -->
            <!-- <el-input style="width: 0;visibility: hidden;" class="search-content-input" v-model="searchContent.employeeName" placeholder="请输入员工姓名"></el-input> -->
            <el-select v-model="searchContent.signUpChannel" placeholder="请选择项目分类">
                <el-option
                    v-for="item in channelList"
                    :key="item.id"
                    :label="item.project_class_name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="searchContent.payStatus" placeholder="请选择状态">
                <el-option
                    v-for="item in payStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="searchContent.cdkey_state" placeholder="请选择兑换码">
                <el-option
                    v-for="item in statelist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-input class="search-content-input" v-model="searchContent.effective_day" placeholder="请输入生效天数"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="resetSearchData">重置</el-button>
        </div>
        <div class="search-list">
            <el-table :data="signUpInfoList" border :height="oHeight">
                <el-table-column
                    align="center"
                    prop="id"
                    label="ID"
                    min-width="65"></el-table-column>
                <el-table-column
                    align="center"
                    prop="userName"
                    label="名称"
                    min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    prop="userPhone"
                    label="项目分类"
                    min-width="120"></el-table-column>
                <el-table-column
                    align="center"
                    label="用户手机"
                    prop="orderSerialNumber"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="groupName"
                    label="抵扣金额"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="groupCategory"
                    label="截止时间"
                    min-width="90">
                    <template slot-scope="scope">
                        <span>{{scope.row.groupCategory | dateFormatter('YYYY-MM-DD ')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="使用状态"
                    min-width="120">
                    <template slot-scope="scope">
                        <!-- <span>{{scope.row.channel}}</span> -->
                        <span v-html="computedCheckStatus(scope.row)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="channel"
                    label="核销人员"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="intentionMoney"
                    label="使用店铺"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="cdkeycode"
                    label="兑换码"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="effectivedate"
                    label="核销时间"
                    min-width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.uc_verify_time != 0">{{scope.row.uc_verify_time | dateFormatter('YYYY-MM-DD ')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="uc_use_condition"
                    label="使用条件"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="uc_addtime"
                    label="购买时间"
                    min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.uc_addtime | dateFormatter('YYYY-MM-DD ')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="uc_verify"
                    label="核销码"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="qq_work"
                    label="启擎工单号"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="internal_settlement"
                    label="内部结算价"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="uc_member_id"
                    label="用户id"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    fixed="right"
                    min-width="80">
                    <template slot-scope="scope" v-if="scope.row.signUpTime == 1">
                        <el-button type="text" @click="handleUpdate(scope.row, 'invalid')">失效</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group" >
                    <a class="btn-bottom" :href="exportLink">导出</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {dateFormatter} from "../../../../common/js/util";
	import { resize } from "@/common/js/height.js";
	import Qs from 'qs'

	export default {
		data() {
			return {
               
				payStatusList: [
					{label: '未使用 ', value: 1},
					{label: '已使用', value: 2},
                    {label: '已过期', value: 3},
                    {label: '已失效', value: 4},
                    {label: '未激活', value: 5}
                ],
                statelist: [
					{label: '开启 ', value: 1},
					{label: '关闭', value: 2},
                   
                ],
               
                channelList: [
                ],
                
				oHeight: 800,
				searchContent: {
					groupName: '',
					userName: '',
					userPhone: '',
					payStatus: '',
                    signUpChannel: '',
                    verifyTime: '',
                    addTime: '',
			        employeeName: '',
					pageSize: localStorage.getItem("pageSize") * 1 || 10
				},
				signUpInfoList: [],
				total: 0
			}
		},
		computed: {
			exportLink() {
				const data = {};
				
				data.form_submit = "1";
				data.curpage = this.searchContent.currentPage;
				data.pagesize = this.searchContent.pageSize;
				data.bg_name = this.searchContent.groupName;
				data.verify_people  = this.searchContent.userName;
                data.member_mobile = this.searchContent.userPhone;
                data.store_name = this.searchContent.store_name;
                data.effective_day = this.searchContent.effective_day;
                
                data.cdkey_state  = this.searchContent.cdkey_state;
				data.state  = this.searchContent.payStatus;
				data.project_class = this.searchContent.signUpChannel;
                data.employee_name = this.searchContent.employeeName;
                if (this.searchContent.verifyTime) {
					data.verify_start_time = this.searchContent.verifyTime[0];
					data.verify_end_time = this.searchContent.verifyTime[1];
				}
                if (this.searchContent.addTime) {
					data.add_start_time = this.searchContent.addTime[0];
					data.add_end_time = this.searchContent.addTime[1];
				}
				let domain = document.domain;
				if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
					domain = 'admin.chejj.cn'
                }
				return location.protocol + '//' + domain.replace('admin', 'api') + '/admin/platform_coupon/index.php?act=platform_coupon&op=get_ucoupon&' + Qs.stringify(data);
			}
		},
		methods: {
			refund(item) {
				// this.$http.post('/admin/afterSalesGroupBuy/index.php?act=signup&op=returnMoney', {
				// 	id: item.id
                // }).then(res => {
                // 	if (res.code == 1) {
                //         item.payStatus = 3;
                //     } else {
                // 		alert(res.msg);
                //     }
                // })
            },
           
            computedCheckStatus(row) {
                let { signUpTime, groupCategory } = row
                if (signUpTime == 1 && groupCategory < +new Date()) {
                    signUpTime = 3
                    row.signUpTime = 3
                }
				switch (signUpTime*1) {
					case 1:
						return '<span class="color-success">未使用</span>';
					case 3:
						return '<span class="color-info">已过期</span>';
					case 2:
                        return '已使用';
                    case 4:
						return '<span class="color-info">已失效</span>';
					case 5:
						return '<span class="color-danger">未激活</span>';
					
                    case 9:
                        return '9';
                    case 11:
                        return '11';
                    case 12:
                        return '22';
                    case 999:
						return '999';
				}
			},
			resetSearchData() {
				this.searchContent.groupName = '';
				this.searchContent.userName = '';
                this.searchContent.userPhone = '';
                this.searchContent.store_name = '';
                this.searchContent.effective_day = '';
				this.searchContent.payStatus = '';
                this.searchContent.cdkey_state = '';
				this.searchContent.signUpChannel = '';
                this.searchContent.employeeName = '';
                this.searchContent.verifyTime = '';
                this.searchContent.addTime = '';
				this.search();
			},
			search() {
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleSizeChange(pageSize) {
                localStorage.setItem("pageSize", pageSize)
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
                const data = {};
                
				data.curpage = this.searchContent.currentPage;
				data.pagesize = this.searchContent.pageSize;
				data.bg_name = this.searchContent.groupName;
				data.verify_people  = this.searchContent.userName;
                data.member_mobile = this.searchContent.userPhone;
                data.store_name = this.searchContent.store_name;
                data.effective_day = this.searchContent.effective_day;
                
                data.cdkey_state  = this.searchContent.cdkey_state;
				data.state  = this.searchContent.payStatus;
				data.project_class = this.searchContent.signUpChannel;
                data.employee_name = this.searchContent.employeeName;
                if (this.searchContent.verifyTime) {
					data.verify_start_time = this.searchContent.verifyTime[0];
					data.verify_end_time = this.searchContent.verifyTime[1];
				}
                if (this.searchContent.addTime) {
					data.add_start_time = this.searchContent.addTime[0];
					data.add_end_time = this.searchContent.addTime[1];
				}
				this.$http.post('/admin/platform_coupon/index.php?act=platform_coupon&op=get_ucoupon', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list && res.data.list.length) {
                            this.signUpInfoList = res.data.list.map(function (item) {
								return {
									id: item.id,
									userName: item.uc_pc_name,
									userPhone: item.uc_class_name,
									orderSerialNumber: item.uc_member_mobile,
									groupName: item.uc_deduction_price,
									groupCategory: item.uc_endtime*1000,
									signUpTime: item.uc_state,
									channel: item.uc_verify_people,
									intentionMoney: item.uc_store_name,
                                    cdkeycode: item.uc_cdkey_code,
                                    effectivedate:item.uc_effective_date*1000,
                                    uc_use_condition: item.uc_use_condition,
									uc_addtime: item.uc_addtime*1000,
									uc_verify: item.uc_verify,
									qq_work: item.qq_work,
									internal_settlement: item.internal_settlement,
                                    uc_member_id: item.uc_member_id,
                                    uc_verify_time:item.uc_verify_time*1000
								}
                            });
                            this.total = parseInt(res.data.TotalNum);
                            this.channelList=res.data.class_list;
						} else {
							this.signUpInfoList = [];
							this.total = 0;
						}
					}
					else if (res.code == 2001) {
						this.signUpInfoList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			},
            handleUpdate(row, type) {
                const msg = '确定设置失效？'
                this.$confirm(msg, '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/admin/platform_coupon/index.php?act=platform_coupon&op=closeCouponVIP', {params: {id: row.id}}).then(res => {
                        if (res.code == 100) {
                            this.$message.success('设置成功')
                            this.getListData()
                        } else {
                            res.msg && this.$message.error(`${res.msg}`)
                        }
                    }).catch(error => {
                        error && this.$message.error(`${error}`)
                    })
                }).catch(() => {})
            }
		},
		mounted() {
			resize(this)
		},
		created() {
			if (this.$parent.tabLists[1] && this.$parent.tabLists[1].label == "审核" && this.$parent.tabLists[1].name == "group-detail") {
				this.$parent.tabLists.splice(1, 1);
			}
			this.getListData();
		},
		name: "sign-up-info"
	}
</script>

<style lang="scss" scoped>
    .sign-up-info {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .time-range-wrapper {
                .time-range-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
</style>